import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:health/icons/flutter_icons.dart';
import 'package:health/utils/colors.dart';
import 'package:health/utils/styles.dart';
import 'package:health/utils/tools.dart';

import 'card_logic.dart';

class CardPage extends GetView<CardLogic> {
  const CardPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        leading: Center(
          child: IconButton(
              onPressed: () {
                Get.back();
              },
              icon: Icon(
                AntdIcons.left,
                color: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                size: 20,
              )),
        ),
        backgroundColor: Colors.white,
        centerTitle: true,
        title: Text(
          '编辑卡片',
          style: StylesUtils.textStyle(
              fontSize: 18, color: ColorsUtils.rgba(0, 0, 0, 0.85), fontWeight: FontWeight.w700),
        ),
        elevation: 0,
        shape: Border(bottom: BorderSide(color: ColorsUtils.rgba(242, 242, 242, 1))),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(horizontal: 15),
        child: Column(
          children: [
            Container(
              height: 60,
              alignment: Alignment.centerLeft,
              child: Text(
                '说明：管理健康页面的显示数据',
                style: StylesUtils.textStyle(color: ColorsUtils.rgba(0, 0, 0, 0.65)),
              ),
            ),
            Container(
                padding: const EdgeInsets.only(left: 5),
                child: ListBody(
                  children: [
                    Container(
                      margin: const EdgeInsets.only(bottom: 30),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Expanded(
                              child: Container(
                            alignment: Alignment.centerLeft,
                            child: Wrap(
                              spacing: 30,
                              children: [
                                Icon(
                                  Icons.menu,
                                  size: 25,
                                  color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorCccc),
                                ),
                                Text.rich(TextSpan(children: [
                                  WidgetSpan(
                                      child: ToolsUtils.getUrlSvg(
                                          'https://img.axureshop.com/d1/0d/00/d10d002b3fd44ba5aacc6b974316320e/images/健康/u2376.svg',
                                          width: 12,
                                          height: 20),
                                      alignment: PlaceholderAlignment.middle),
                                  TextSpan(
                                      text: '  走步',
                                      style: StylesUtils.textStyle(
                                          color: ColorsUtils.rgba(0, 0, 0, 0.85), fontSize: 16))
                                ]))
                              ],
                            ),
                          )),
                          SizedBox(
                            width: 30,
                            height: 30,
                            child: CustomPaint(
                              painter: _PainterRound(),
                            ),
                          )
                        ],
                      ),
                    ),
                    Container(
                      margin: const EdgeInsets.only(bottom: 30),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Expanded(
                              child: Container(
                            alignment: Alignment.centerLeft,
                            child: Wrap(
                              spacing: 30,
                              children: [
                                Icon(
                                  Icons.menu,
                                  size: 25,
                                  color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorCccc),
                                ),
                                Text.rich(TextSpan(children: [
                                  WidgetSpan(
                                      child: ToolsUtils.getUrlSvg(
                                          'https://img.axureshop.com/d1/0d/00/d10d002b3fd44ba5aacc6b974316320e/images/编辑卡片/u5468.svg',
                                          width: 18,
                                          height: 18),
                                      alignment: PlaceholderAlignment.middle),
                                  TextSpan(
                                      text: '  体重',
                                      style: StylesUtils.textStyle(
                                          color: ColorsUtils.rgba(0, 0, 0, 0.85), fontSize: 16))
                                ]))
                              ],
                            ),
                          )),
                          SizedBox(
                            width: 30,
                            height: 30,
                            child: CustomPaint(
                              painter: _PainterRound(),
                            ),
                          )
                        ],
                      ),
                    ),
                    Container(
                      margin: const EdgeInsets.only(bottom: 30),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Expanded(
                              child: Container(
                            alignment: Alignment.centerLeft,
                            child: Wrap(
                              spacing: 30,
                              children: [
                                Icon(
                                  Icons.menu,
                                  size: 25,
                                  color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorCccc),
                                ),
                                Text.rich(TextSpan(children: [
                                  WidgetSpan(
                                      child: ToolsUtils.getUrlSvg(
                                          'https://img.axureshop.com/d1/0d/00/d10d002b3fd44ba5aacc6b974316320e/images/健康/u2364.svg',
                                          width: 16,
                                          height: 18),
                                      alignment: PlaceholderAlignment.middle),
                                  TextSpan(
                                      text: '  睡眠',
                                      style: StylesUtils.textStyle(
                                          color: ColorsUtils.rgba(0, 0, 0, 0.85), fontSize: 16))
                                ]))
                              ],
                            ),
                          )),
                          SizedBox(
                            width: 30,
                            height: 30,
                            child: CustomPaint(
                              painter: _PainterRound(),
                            ),
                          )
                        ],
                      ),
                    ),
                    Container(
                      margin: const EdgeInsets.only(bottom: 30),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Expanded(
                              child: Container(
                            alignment: Alignment.centerLeft,
                            child: Wrap(
                              spacing: 30,
                              children: [
                                Icon(
                                  Icons.menu,
                                  size: 25,
                                  color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorCccc),
                                ),
                                Text.rich(TextSpan(children: [
                                  WidgetSpan(
                                      child: ToolsUtils.getUrlSvg(
                                          'https://img.axureshop.com/d1/0d/00/d10d002b3fd44ba5aacc6b974316320e/images/健康/u2351.svg',
                                          width: 18,
                                          height: 16),
                                      alignment: PlaceholderAlignment.middle),
                                  TextSpan(
                                      text: '  心率',
                                      style: StylesUtils.textStyle(
                                          color: ColorsUtils.rgba(0, 0, 0, 0.85), fontSize: 16))
                                ]))
                              ],
                            ),
                          )),
                          SizedBox(
                            width: 30,
                            height: 30,
                            child: CustomPaint(
                              painter: _PainterRound(),
                            ),
                          )
                        ],
                      ),
                    ),
                    Container(
                      margin: const EdgeInsets.only(bottom: 30),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Expanded(
                              child: Container(
                            alignment: Alignment.centerLeft,
                            child: Wrap(
                              spacing: 30,
                              children: [
                                Icon(
                                  Icons.menu,
                                  size: 25,
                                  color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorCccc),
                                ),
                                Text.rich(TextSpan(children: [
                                  WidgetSpan(
                                      child: ToolsUtils.getUrlSvg(
                                          'https://img.axureshop.com/d1/0d/00/d10d002b3fd44ba5aacc6b974316320e/images/健康/u2336.svg',
                                          width: 14,
                                          height: 18),
                                      alignment: PlaceholderAlignment.middle),
                                  WidgetSpan(
                                      child: ToolsUtils.getUrlSvg(
                                          'https://img.axureshop.com/d1/0d/00/d10d002b3fd44ba5aacc6b974316320e/images/健康/u2335.svg',
                                          width: 9,
                                          height: 11),
                                      alignment: PlaceholderAlignment.middle),
                                  TextSpan(
                                      text: '  血氧饱和度',
                                      style: StylesUtils.textStyle(
                                          color: ColorsUtils.rgba(0, 0, 0, 0.85), fontSize: 16))
                                ]))
                              ],
                            ),
                          )),
                          SizedBox(
                            width: 30,
                            height: 30,
                            child: CustomPaint(
                              painter: _PainterRound(),
                            ),
                          )
                        ],
                      ),
                    ),
                  ],
                )),
            Container(
              padding: const EdgeInsets.only(left: 60),
              child: ListBody(
                children: [
                  Container(
                    margin: const EdgeInsets.only(bottom: 30),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Expanded(
                            child: Container(
                                alignment: Alignment.centerLeft,
                                child: Text.rich(TextSpan(children: [
                                  WidgetSpan(
                                      child: ToolsUtils.getUrlSvg(
                                          'https://img.axureshop.com/d1/0d/00/d10d002b3fd44ba5aacc6b974316320e/images/健康/u2301.svg',
                                          width: 20,
                                          height: 28),
                                      alignment: PlaceholderAlignment.middle),
                                  TextSpan(
                                      text: '  体温',
                                      style: StylesUtils.textStyle(
                                          color: ColorsUtils.rgba(0, 0, 0, 0.85), fontSize: 16))
                                ])))),
                        SizedBox(
                          width: 30,
                          height: 30,
                          child: CustomPaint(
                            painter: _PainterRound2(),
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(bottom: 30),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Expanded(
                            child: Container(
                                alignment: Alignment.centerLeft,
                                child: Text.rich(TextSpan(children: [
                                  WidgetSpan(
                                      child: ToolsUtils.getUrlSvg(
                                          'https://img.axureshop.com/d1/0d/00/d10d002b3fd44ba5aacc6b974316320e/images/健康/u2292.svg',
                                          width: 10,
                                          height: 18),
                                      alignment: PlaceholderAlignment.middle),
                                  TextSpan(
                                      text: '  血压',
                                      style: StylesUtils.textStyle(
                                          color: ColorsUtils.rgba(0, 0, 0, 0.85), fontSize: 16))
                                ])))),
                        SizedBox(
                          width: 30,
                          height: 30,
                          child: CustomPaint(
                            painter: _PainterRound2(),
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(bottom: 30),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Expanded(
                            child: Container(
                                alignment: Alignment.centerLeft,
                                child: Text.rich(TextSpan(children: [
                                  WidgetSpan(
                                      child: ToolsUtils.getUrlSvg(
                                          'https://img.axureshop.com/d1/0d/00/d10d002b3fd44ba5aacc6b974316320e/images/健康/u2283.svg',
                                          width: 20,
                                          height: 21),
                                      alignment: PlaceholderAlignment.middle),
                                  TextSpan(
                                      text: '  血糖',
                                      style: StylesUtils.textStyle(
                                          color: ColorsUtils.rgba(0, 0, 0, 0.85), fontSize: 16))
                                ])))),
                        SizedBox(
                          width: 30,
                          height: 30,
                          child: CustomPaint(
                            painter: _PainterRound2(),
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(bottom: 30),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Expanded(
                            child: Container(
                                alignment: Alignment.centerLeft,
                                child: Text.rich(TextSpan(children: [
                                  WidgetSpan(
                                      child: ToolsUtils.getUrlSvg(
                                          'https://img.axureshop.com/d1/0d/00/d10d002b3fd44ba5aacc6b974316320e/images/健康/u2314.svg',
                                          width: 20,
                                          height: 17),
                                      alignment: PlaceholderAlignment.middle),
                                  TextSpan(
                                      text: '  运动',
                                      style: StylesUtils.textStyle(
                                          color: ColorsUtils.rgba(0, 0, 0, 0.85), fontSize: 16))
                                ])))),
                        SizedBox(
                          width: 30,
                          height: 30,
                          child: CustomPaint(
                            painter: _PainterRound2(),
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      '拖动左侧的按钮调整卡片的顺序',
                      style: StylesUtils.textStyle(color: ColorsUtils.rgba(0, 0, 0, 0.65)),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _PainterRound extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..strokeWidth = 1
      ..strokeJoin = StrokeJoin.round
      ..style = PaintingStyle.stroke
      ..color = ColorsUtils.parseColorFromHexString('#F97B82')
      ..isAntiAlias = true;
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), size.height / 2, paint);
    double width = 20;
    double start = (size.width - width) / 2;
    canvas.drawLine(Offset(start, size.height / 2), Offset(start + width, size.height / 2), paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return this != oldDelegate;
  }
}

class _PainterRound2 extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..strokeWidth = 1
      ..strokeJoin = StrokeJoin.round
      ..style = PaintingStyle.fill
      ..color = ColorsUtils.parseColorFromHexString(ColorsUtils.color096d)
      ..isAntiAlias = true;
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), size.height / 2, paint);

    paint.style = PaintingStyle.stroke;
    paint.color = Colors.white;
    double width = 10;
    double start = (size.width - width) / 2;
    canvas.drawLine(Offset(start, size.height / 2), Offset(start + width, size.height / 2), paint);
    canvas.drawLine(Offset(size.width / 2, start), Offset(size.width / 2, start + width), paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return this != oldDelegate;
  }
}
